<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").dblclick(function() {
					$("p").toggle(5000);
					$("h2").css("background-color", "red");
				});
			});
			$(document).ready(function() {
				$(".downbt").dblclick(function() {
					$(".slideDown").slideToggle(5000);
				});
				$(".stop").click(function() {
					$(".slideDown").stop();
				});
			});
			$(document).ready(function() {
				$(".fadebt").click(function() {
					$(".fade").fadeTo("slow", 0.25);
				});
				$(".fadetwobt").click(function() {
					$(".one").fadeToggle();
					$(".two").fadeToggle("slow");
					$(".three").fadeToggle(3000);
				});
				$(".animate").click(function() {
					$(".four").animate({
						left: '250px',
						height: 'toggle',
						width: '+=150px'
					});
				});
				$(".animatetwo").click(function() {
					$(".five").animate({
						width: '300px',
						opacity: '0.4',
						fontSize: '100px'
					}, "slow");
					$(".five").animate({
						height: '300px',
						opacity: '0.8'
					}, "slow");
					$(".five").animate({
						width: '20px',
						opacity: '0.4'
					}, "slow");
					$(".five").animate({
						height: '20px',
						opacity: '0.8',
						fontSize: '20px'
					}, "slow");
				});
				$(".testbt").click(function() {
					alert('Test:' + $(".pdemo").text());
				});
				$(".htmlbt").click(function() {
					alert('Html:' + $(".pdemo").html());
				});
				$(".textbt").click(function() {
					alert('Value:' + $(".textdemo").val());
				});
				$(".setvalue").click(function() {
					$(".textdemo").val("张彪");
				});
				$(".baidubt").click(function() {
					$(".sougou").val("百度");
					alert($(".sougou").val());
				});
				$(".hrefbaidu").click(function() {
					$(".sougou").attr("href", "https://www.baidu.com/");
				});
				$(".del").dblclick(function() {
					$("td").empty();
				});
			});
		</script>
		<style type="text/css">
			.slideDown {
				height: 300px;
				width: 500px;
				background-color: aquamarine;
			}
			
			.downbt {
				width: 500px;
			}
			
			.fade {
				height: 300px;
				width: 500px;
				background-color: greenyellow;
			}
			
			.one {
				width: 50px;
				height: 30px;
				background-color: red;
				display: none;
			}
			
			.two {
				width: 50px;
				height: 30px;
				background-color: green;
				display: none;
			}
			
			.three {
				width: 50px;
				height: 30px;
				background-color: blue;
				display: none;
			}
			
			.four {
				position: relative;
				width: 50px;
				height: 30px;
				background-color: yellowgreen;
			}
			
			.five {
				position: relative;
				top: -700px;
				left: 700px;
				width: 20px;
				height: 20px;
				background-color: cornflowerblue;
			}
		</style>
	</head>

	<body>
		<h2>This is a heading</h2>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<button type="button">Click me</button>
		<input type="button" value="停止滑动" class="stop" />
		<div class="slideDown">Because time is valuable, we deliver quick and easy learning. At W3School, you can study everything you need to learn, in an accessible and handy format.
		</div>
		<input type="button" value="显示div" class="downbt" />
		<div class="fade">
			<input type="button" value="透明度为25%" class="fadebt" />
		</div>
		<input type="button" value="点击这里使三个矩形淡入" class="fadetwobt" />
		<input type="button" value="单击第四个div向右移动250px" / class="animate">
		<input type="button" value="div动画" class="animatetwo" />
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
		<div class="five">Hello</div>
		<p class="pdemo">这是段落中的<b>粗体</b>文本</p>
		<input type="button" value="显示此标签文本" class="testbt" />
		<input type="button" value="显示此标签html" class="htmlbt" />
		<input type="text" class="textdemo" />
		<input type="button" class="textbt" value="文本框的值" />
		<input type="button" class="setvalue" value="设置文本框的值" />

		<a href="https://www.sogou.com/" class="sougou">默认搜狗搜索</a>

		<input type="button" value="链接百度" class="hrefbaidu" />
		<table border="1">
			<tr>
				<th>Header</th>
			</tr>
			<tr>
				<td>Data</td>
			</tr>
		</table>
		<input type="button" value="删除表格数据" class="del" />

	</body>

</html>